<template>
  <div class="multi_comment_list">
    <div class="user">
      <span class="from_user">{{multiCommentContentItem.nickname}}</span>
    </div>
    <div class="comment_message">{{multiCommentContentItem.content}}</div>
    <div class="comment_time">{{time}}</div>
    <div class="action">
      <span class="del el-icon-delete"
            @click="delCommentClick"
            v-if="isOwnComment"></span>
      <div class="like" @click="like">
        <span class="iconfont" v-show="!isLike">&#xe8ab;</span>
        <span class="iconfont like_active" v-show="isLike">&#xe8c3;</span>
        <span>点赞</span>
      </div>
      <div class="replay" @click="replayClick">
        <span class="iconfont">&#xe8b5;</span>
        <span>回复</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {comment, delComment} from "network/detail";
  import {formatTime} from "common/Utils";

  export default {
    name: "MultiCommentList",
    props: {
      multiCommentContentItem: {
        type: Object,
        default() {
          return {}
        }
      },
      articleId: {
        type: String,
        request: true
      }
    },
    data() {
      return {
        isLike: false,
      }
    },
    computed: {
      isOwnComment() {
        return this.$store.state.userInfo.id === this.multiCommentContentItem.userId
      },
      time() {
        return this.multiCommentContentItem.time ? formatTime(this.multiCommentContentItem.time) : ''
      }
    },
    methods: {
      replayClick() {
        this.$prompt('请输入你的回复', `正在回复 > ${this.multiCommentContentItem.nickname}`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /./,
          inputErrorMessage: '输入的内容不能为空'
        }).then(({ value }) => {
          this.$toast.show('成功回复', 'success', 1000)
        }).catch(() => {
          this.$toast.show('已取消回复', 'default', 1000)
        });
      },
      delCommentClick() {
        this.$confirm('删除此评论, 是否确定?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const obj = {
            articleId: this.articleId,
            commentId: this.multiCommentContentItem._id
          }
          delComment(obj).then(res => {
            if(res.data.code) {
              this.$toast.show('删除成功', 'success', 1000)
              this.$bus.$emit('refresh')
            }
          })
        }).catch(() => {
          this.$toast.show('已取消删除', 'default', 1000)
        });
      },
      like() {
        this.isLike = !this.isLike
      }
    }
  }
</script>

<style scoped>
  .multi_comment_list {
    position: relative;
    width: 800px;
    margin: 10px auto 10px;
    padding: 10px 20px;
    background-color: #fff;
    border-radius: 10px;
  }

  .user .from_user {
    margin-right: 10px;
    font-weight: 700;
  }

  .user .to_user {
    margin-left: 10px;
    font-weight: 700;
  }

  .comment_message {
    margin-top: 10px;
  }

  .comment_time {
    margin-top: 10px;
    color: #8F9395;
    font-size: 12px;
  }

  .action {
    position: absolute;
    bottom: 15px;
    right: 0;
    overflow: hidden;
    line-height: 32px;
    font-size: 14px;
  }

  .action .like,
  .action .replay {
    float: right;
    width: 70px;
    height: 32px;
    margin-right: 20px;
    border: 1px solid #DCDFE6;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
  }

  .like_active {
    color: #002766;
  }

  .action .del {
    margin: 12px 20px 0 0;
    float: right;
    color: #8F9395;
  }

  .action .del:hover {
    cursor: pointer;
    color: #002766;
  }

  .action .like span:nth-child(1),
  .action .replay span:nth-child(1) {
    margin-right: 2px;
  }
</style>
